<head>
<title>JBEI DNA Constructor</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
</head>
<style>
.jqmWindow {
		display: none;
		
		position: fixed;
		top: 10%;
		left: 50%;
		
		margin-left: -300px;
		width: 800px;
		
		background-color: #EEE;
		color: #333;
		border: 1px solid black;
		padding: 12px;
}

.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
	width: expression(this.parentNode.offsetWidth+"px");
	height: expression(this.parentNode.offsetHeight+"px");
}

/* Fixed positioning emulation for IE6
		 Star selector used to hide definition from browsers other than IE6
		 For valid CSS, use a conditional include instead */
* html .jqmWindow {
		 position: absolute;
		 top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + "px");
}

#responseDiv {
	position:relative;
	z-index:1;
}

#everything {
    padding: 15px;
}

</style>

<script src="/static/json2.js"></script>
<script src="/static/jquery-1.5.2.min.js"></script>
<script src="/static/jquery-ui-1.8.14.custom.min.js"></script>
<script>
	$j=jQuery.noConflict();
</script>
<script src="/static/jqModal.js"></script>
<script src="/static/prototype.js"></script>
<script src="/static/path.js"></script>
<script src="/static/canviz.js"></script>
<script src="/static/jquery.form.js"></script>
<script src="/static/source.js"></script>

<div class="pull-right">
    <a href="/copyright">Copyright</a>&nbsp;&nbsp;::&nbsp;&nbsp;
    <a href="/disclaimer">Disclaimer</a>&nbsp;&nbsp;::&nbsp;&nbsp;
    <a href="https://github.com/JBEI/dna-constructor">Get code</a>&nbsp;&nbsp;
</div>

<div class="text-center">
    <span style="font-size:large">JBEI DNA Constructor </span> <br> <br>
</div>

<div id="everything" class="container-fluid">
<!--<a href="#" id="protocolsLink">Browse Existing Protocols</a>-->
    <div class="row">
        <div class="col-lg-12">
            <br> Enter Template Code:<br>
            <textarea id="sequenceText" rows="10" style="width: 100%;">targets="CAGGCTAAGGGCACGCCTGCTTGGGCGTCGCGCTTCGTCTCTCTCCTGCCAATGCTTGCCCGGCATACAGCCAGGCCGGCGTGGTGCGGATGTGAAAGATTGGCCCCTTGTGCCTAGGTGCGGCGGGTCCAAGAGCTGGTGTTTTGATGGCCCGGAACCCGGCAAGAGGTGGACGGATGCTGGCAGCAGCTGCCGTGCGAATCCCCCATGTTGTCGTGCTTGTCGGACAGGCAGGAGAACCCTTCCGAACCCCAATGGAGGGCGGTTGACCGCCATTCGGATGTGACCCCAGGTCAGGCGGGGGCACCCGCTGAGTTTACGC"
            </textarea><br>
        </div>
    </div>

    <br>

    <div class="row">
        <div class="col-lg-12">
            <a href="#" id="addFragmentLink" class="btn-xs btn-info">Add Natural Fragments</a><br>
        </div>
    </div>

    <div id="addFragmentDiv" class="row col-lg-6">
        <input id="fragmentText" type="text" />
    </div>

    <div id="exportDiv">
        <a href="#" id="exportLink">Export Layers</a><br>
        <p id="instr">Enter a range of layers to submit (0 being the target sequence),<br>
        in the form "x-y" or just "x", or enter "target" or "oligos".</p><br>
        <input id="layersText" type="text" />
        <input id="layersSubmit" type="submit" value="Export" class="btn btn-default" />
    </div>

    <br>
    <div id="debug_output"></div>

    <div id="nodeInfo" class="jqmWindow"></div>

    <div id="showProtocols"></div>

    <div id="parameters" class="row">
        <br>
        <div id="primerParams" class="col-lg-6">
            <b>Primer Parameters:</b>
            <br> <a href="#" id="usePrimerDefaults" class="btn-xs btn-info">Use Defaults</a>
            <br><br> Minimum primer length:
            <input id="minLengthText" type="text" size=10 placeholder=35 />
            <br><br> Maximum primer length:
            <input id="maxLengthText" type="text" size=10 placeholder=45 />
            <br><br> Length of 3" Region:
            <input id="threeprimeLengthText" type="text" size=10 placeholder=8 />
            <br><br> Maximum Matches in 3" Region:
            <input id="maxThreeprimeText" type="text" size=10 placeholder=6 />
            <br><br> Number of Recursive Division Steps:
            <input id="numStepsText" type="text" size=10 placeholder=2 />
            <br><br>
        </div>
        
        <div id="constructParams" class="col-lg-6">
            <b>Construction Parameters:</b>
            <br> <a href="#" id="useConstructDefaults" class="btn-xs btn-info">Use Defaults</a>
            <br><br> Minimum Overlap Between Oligos:
            <input id="minOverlapText" type="text" size=10 placeholder=20 />
            <br><br> Maximum Overlap:
            <input id="maxOverlapText" type="text" size=10 placeholder=30 />
            <br><br> Maximum Oligo Length:
            <input id="maxOligoLengthText" type="text" size=10 placeholder=80 />
            <br><br> Max Division Distance from Center:
            <input id="maxDeviationText" type="text" size=10 placeholder=10 />
        </div>
    </div>
    <br>

    <div class="row">
        <div class="col-lg-12">
            <a id="sequenceButton" class="btn btn-primary">Submit</a>
        </div>
    </div>
    <div id="responseDiv" class="row"></div>
    <div id="report"></div>
    <div id="loading" class="row">
        <div class="col-lg-12">
            <br>
            <b>Please Wait...</b>
            <br>
            <img src="http://dnaconstructor.jbei.org/images/ajax-loader.gif" />
        </div>
    </div>
</div>
